<template>
	<view class="container">
		<view class="top-box">
			<view class="order-select">
				<picker @change="pickerOrderTypeChange" :value="orderTypeValue" :range="optionOrderType" class="select-item">
					<view class="uni-input picker-value">
						{{optionOrderType[orderTypeValue] ? optionOrderType[orderTypeValue] : '全部订单'}}
						<uni-icons type="arrowdown" class="arrow-down"></uni-icons>
					</view>
				</picker>
				<picker @change="pickerOrderChange" :value="orderValue" :range="optionOrderNams" class="select-item">
					<view class="uni-input picker-value">
						{{optionOrderNams[orderValue] ? optionOrderNams[orderValue] : '未超时订单'}}
						<uni-icons type="arrowdown" class="arrow-down"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<view style="height: 50px;">
			
		</view>
		<view class="empty-box" v-if="showNoData">
			<image class="empty-img" src="/static/icon_nodata_big.png"></image>
			<view>暂无订单数据</view>
		</view>
		<view class="acticities-item" v-for="(item,itemIndex) in tabsLists" :key="itemIndex" @click="itemClick(item)">
			<view class="top_item">
				<span>订单编号：{{item.orderNo}}</span>
			</view>
			<view class="content_item">
				<image class="video-img" v-if="item.clazz==1" src="/static/icon_md.png"></image>
				<image class="video-img" v-if="item.clazz==2" src="/static/icon_ai.png"></image>
				<image class="video-img" v-if="item.clazz==3" src="/static/icon_spjx.png"></image>
				<view class="content-right">
					<view class="item-title">
						<span>
							{{item.name}}
						</span>
						<span style="color: red;">
							￥{{item.amount?(Number(item.amount)/100).toFixed(2):0}}
						</span>
					</view>
					<view class="item-uptatetime">
						<span class="price-dw">购买时间：</span>
						{{item.pay_time}}
					</view>
					<!-- <view class="item-uptatetime">
						<span class="price-dw">过期时间：</span>
						{{item.timeout}}
					</view> -->
					<view class="item-uptatetime">
						<span class="price-dw">使用状态：</span>
						{{item.status | fileformat}}
					</view> 
					
					
					<view class="item_bottom" v-if="item.clazz==1">
						<view class="">
							设备登录使用
						</view>
						<view class="">
							退出登录
						</view>
					</view> 
					
					<view class="item_bottom" v-if="item.clazz==2" @click="goconsumption(item)">
						<view class="">
							设备登录使用
						</view> 
					</view> 
					
					
					<view class="item_bottom" v-if="item.clazz==3">
						<view @click="playVideo(item)">
							开始播放
						</view> 
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderInfo,
		getTimeoutOrderInfo,
		getconsumption,
		postconsumption
	} from '@/common/api/index.js'
	import {
		showTishi,
		getDuration,
		showAndHideLoading
	} from 'utils/index.js'
	export default {
		components: {},
		data() {
			return {
				optionOrderType: [
					'订单类型',
					'门店套餐',
					'Ai教练',
					'视频教学',
				],
				optionOrderNams: [
					'未超时订单',
					'超时订单'
				],
				orderTypeValue: 0,
				orderValue: 0,
				searchQuery: {
					page_size: 10,
					// turn_direction: 'first_page',
					// exclude_ids: 0,
				},
				tabsLists: [{
						orderNo:"22023458690678765",  //订单号
						name: "2小时390元",   //名称
						amount: "390",            //金额
						pay_time:"2024-06-02 15:50",//购买时间
						timeout:"2024-07-02 15:50",//过期时间
						memo:"购买完成后需要24小时内消费完", //备注
						status:0,  //状态 
					}, {
						orderNo:"22023458690678765",  //订单号
						name: "AI教练",   //名称
						amount: "90",            //金额
						pay_time:"2024-06-15 08:25",//购买时间
						timeout:"2024-07-15 08:25",//过期时间
						memo:"购买完成后需要24小时内消费完", //备注
						status:1,  //状态 
					}, 
				],
				showNoData: false,
				refreshEnd: false,
				has_next_page: false,
				
				
				imei1:null,
				androidID:null,
				serial:null,
				uuid:null,
				mac:null,
				deviceUnique:null,
				clazz:null,
				channel:null,

			};
		},
		onPullDownRefresh() {

		},
		onLoad(options) {
			console.log(options,'options');
			if(options!=null&&options!=""){
				uni.setStorageSync('orderQuery',JSON.stringify(options));
			}else{
				uni.setStorageSync('orderQuery',"");
			}
		},
		onShow() {
			this.getData()
			
			this.imei1= uni.getStorageSync('imei1');
			this.androidID= uni.getStorageSync('androidID');
			this.serial= uni.getStorageSync('serial');
			this.uuid= uni.getStorageSync('uuid');
			this.mac= uni.getStorageSync('mac');
			this.deviceUnique= uni.getStorageSync('deviceUnique');
			this.clazz= uni.getStorageSync('clazz');
			this.channel= uni.getStorageSync('channel'); 
		},
		filters:{
			fileformat(val){
				if(val==1){
					return "未缴费";
				}else if(val==2){
					return "超时关闭(未缴费)";
				}else if(val==3){
					return "用户取消(未缴费)";
				}else if(val==4){
					return "已缴费(未消费)";
				}else if(val==5){
					return "正在消费";
				}else if(val==6){
					return "已消费完";
				}else if(val==7){
					return "正在退款";
				}else if(val==8){
					return "已退款";
				}else{
					return "未知";
				}
			}
		},
		methods: {
			// 登录设备
			goconsumption(item){
				console.log(item,'item');
				let params={
					commodity_id:item.commodity_id,
					device_id:item.device_id,
					instructor_id:item.instructor_id,
					line_id:item.line_id,
					ground_id:item.ground_id,
					multi_res_type:2,
					latitude:22.528341680008918,
					longitude:113.93038735196194,
					order_id:item.id
				}
				
				let orderQuery = uni.getStorageSync('orderQuery');
				if(orderQuery!=null&&orderQuery!=""){
					console.log(orderQuery);
					let parseorderQuery= JSON.parse(orderQuery)
					if(parseorderQuery){
						for (let key in parseorderQuery) {
							params[key]=parseorderQuery[key]
						}
					}
				}
				console.log(params,'登录设备-params');
				
				postconsumption(params).then((res=>{
					console.log(res,'resssss');
					showTishi(res.msg)
				}))
			},
			// 播放视频
			playVideo(item){
				console.log(item);
				uni.navigateTo({
					url: '/pages/student/index/spdetail?tutorial= ' + JSON.stringify(item.tutorial)+"&title="+JSON.stringify(item.name)
				})
			},
			// 订单类型切换
			pickerOrderTypeChange(e) {
				console.log(this.orderTypeValue,this.orderValue,'类型、状态');
				if (this.orderTypeValue !== e.detail.value) {
					this.orderTypeValue = e.detail.value
					
					this.tabsLists = []
					this.getData()
				}
			},
			// 订单状态切换
			pickerOrderChange(e) {
				console.log(this.orderTypeValue,this.orderValue,'类型、状态');
				if (this.orderValue !== e.detail.value) {
					this.orderValue = e.detail.value
					// this.tableList = []
					this.getData()
				}
			},
			// 请求接口获取数据
			getData() {
				// 不传参数，获取全部数据
				let params={
					clazz:this.orderTypeValue
				}
				if(this.orderTypeValue==0){
					params=null
				}
				getOrderInfo(params).then((res=>{
					console.log(res,'resssss');
					if(res.status==0){
						this.tabsLists=res.data
					}else{
						showTishi(res.msg)
					}
				}))

			},

			changeTab(type) {
				if (this.refreshEnd) {
					if (this.type != type) {
						this.type = type
						this.refreshEnd = false
						setTimeout(function() {
							uni.startPullDownRefresh()
						}, 200)
					}
				} else {
					return
				}
			},
			itemClick(item) {
				// 这里是点击整个模块的，建议是给个详情页面，点击这里跳转详情
				
				// 在这里处理点击事件，并使用item作为参数
				// console.log('Item clicked:', item);
				// uni.showToast({
				// 	title: `${item.name}`,
				// 	icon: 'none',
				// })
			}

		},
		onReachBottom() {
			// if (this.has_next_page) {
			// 	// delete this.searchQuery.turn_direction
			// 	let _this = this
			// 	showAndHideLoading()
			// 	setTimeout(function() {
			// 		_this.getData()
			// 	}, 200)
			// } else {
			// 	uni.showToast({
			// 		title: '已加载全部数据',
			// 		icon: 'none'
			// 	})
			// }
		}
		

	}
</script>

<style lang="scss" scoped>
	.container {
		overflow-y: hidden;
		// position: relative;
	}

	.top-box {
		position: fixed;
		width: 100%;
		z-index: 99;
		
		top: 0;
		border-bottom: 12rpx solid #f5f5f5;
	}


	.order-select {
		display: flex;
		height: 70rpx;
		font-size: 28rpx;
		background: #ffffff;
		font-weight: 400;
		line-height: 70rpx;
		color: #666666;

		.select-item {
			width: 50%;
			text-align: center;
			position: relative;
		}

		.arrow-down {
			margin-left: 20rpx;
		}
	} 
	.acticities-item {
		margin-bottom: 20px;
		border: 1px solid #888;
		border-radius: 5px;
		padding: 5px;
		.content_item{
			display: flex;
			align-items: center;
			
		}
		.top_item{
				font-size: 12px;
				color: #888;
		}
		.video-img {
			width: 100px;
			height: 85px;
			margin-right: 10px;
		}

		.content-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.item-title {
				margin-top: 20px;
				font-size: 16px;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
			}

			.item-uptatetime {
				font-size: 12px;
				color: #888;
				margin-top: 15rpx;
			}

			.item-price {
				font-size: 20px;
				color: #ff0000;
				margin-top: 20rpx;
			}
			.item-payunm {
				font-size: 14px;
				color: #888;
				margin-top: 10rpx;
			}
			.item_bottom{
				display: flex;
				justify-content: flex-end;
				view{
					margin-top: -20px;
					font-size: 12px;
					color: white; 
					border-radius: 10px;
					padding: 10px 15px;
					margin-left: 10px;
					background-color: #409EFF;
				}
			}
		}
	}
</style>